import React, { useState } from 'react';
import Taro from '@tarojs/taro';
import {View, Swiper, Text, Image, SwiperItem} from '@tarojs/components';
import './detail-header.scss';

const DetailHeader: React.FC<{images: any; height: any}> = (props: any) => {
  const [imageIndex, setImageIndex] = useState(0);

  const imageChange = (e) => {
    const index = e.detail.current || 0;
    setImageIndex(index);
  }

  const previewImage = async (urls, current) => {
    await Taro.previewImage({
      current: current,
      urls: [urls]
    })
  }

  return (
    <View className='detail-header-box'>
      <View className='wrap'>
        {props.images && props.images.length > 0  && <View className='item'
          style={`height:${props.height ? (process.env.TARO_ENV === 'h5' ? props.height / 46 : props.height) : (process.env.TARO_ENV === 'h5' ? 320 / 46 : 320)}${process.env.TARO_ENV === 'h5' ? 'rem' : 'rpx'};margin-top:0px;margin-bottom:0px`}
        >
          <Swiper className='swiper' current={imageIndex} onChange={(e) => {
            imageChange(e)
          }}
          >
            {props.images.map((item, index) => {
              return <SwiperItem className='swiperItem' key={index}>
                <Image className='img' src={item} mode='aspectFit' onClick={previewImage.bind(this, item, item)} />
              </SwiperItem>
            })}
          </Swiper>
        </View>}
      </View>
      <View className='header-btn-box'>
        <View className='position-r'>
          <View className='car-left'>
            <Text className='left-text'>
              参考样图
            </Text>
            <Text className='right-text'>
              年款/颜色等以实物为准
            </Text>
          </View>
          {props.images && props.images.length > 1 && <View className='right'>
            <Text className='image-number'>{imageIndex + 1}/{props.images && props.images.length || 0}</Text>
          </View>}
        </View>
      </View>
    </View>
  )
}

export default DetailHeader
